<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>View</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
            table-layout: fixed;
        }
        table th, table td {
            padding: 8px;
            text-align: left;
            border: 1px solid #ddd;
        }
        table th {
            background-color: #016bd0;
            color: white;
            position: relative;
            cursor: col-resize;
            user-select: none;
        }
        table th .resize-handle {
            position: absolute;
            top: 0;
            right: -4px;
            bottom: 0;
            width: 8px;
            cursor: col-resize;
            background-color: #ddd;
            opacity: 0.0;
            z-index: 1;
        }
        table th .resize-handle:hover {
            opacity: 0.8;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
    <script>

        $(document).ready(function(){

            //生成表格
            function generateTable(data) {
                var tableHtml = "<table><thead><tr>";
                //表头
                for(var prop in data[0]) {
                    tableHtml += '<th>' + prop + '<div class="resize-handle"></div></th>';
                }
                tableHtml += "</tr></thead><tbody>";
                //数据行
                for (var i = 0; i < data.length; i++) {
                    tableHtml += "<tr>";
                    for(var prop in data[i]) {
                        tableHtml += "<td>" + data[i][prop] + "</td>";
                    }
                    tableHtml += "</tr>";
                }
                tableHtml += "</tbody></table>";

                //将表格插入到页面中
                document.getElementById("table-container").innerHTML = tableHtml;

                //启用表头调整功能
                resizableHeader();
            }

            //表头调整
            function resizableHeader() {
                var table = document.getElementsByTagName("table")[0];
                var thArray = table.getElementsByTagName("th");

                var clicked = null;
                var startX, startWidth;

                for(var i=0;i<thArray.length;i++) {
                    var curTh = thArray[i];
                    curTh.onmousedown = function() {
                        clicked = this;
                        startX = event.clientX;
                        startWidth = this.offsetWidth;
                    };

                    curTh.onmousemove = function() {
                        if(clicked == null && event.clientX>(this.offsetLeft+this.offsetWidth-5)) {
                            this.style.cursor = "col-resize";
                        } else if(clicked == null) {
                            this.style.cursor = "";
                        }
                    };

                    curTh.onmouseup = function() {
                        clicked = null;
                        this.style.cursor = "";
                    };

                    table.onmousemove = function() {
                        if(clicked == null) {
                            return false;
                        }

                        var newWidth = (startWidth + event.clientX - startX);
                        if(newWidth < 30) {
                            newWidth = 30;
                        }

                        clicked.style.width = newWidth + "px";
                    };
                }
            }

            //从URL参数中获取接口地址
            let url = new URL(window.location.href);
            let db = url.searchParams.get("db");
            let group = url.searchParams.get("group");
            let api = url.searchParams.get("api");
            let params = url.searchParams.get("params");
            let type = "query"

            //发送POST请求，获取数据并渲染表格
            $.ajax({
                method: "POST",
                url: "/"+type+"/"+db+"/"+group+"/"+api,
                contentType: 'application/json',
                body: JSON.parse(params),
                success: function(data){
                    if (data.result != null && data.result.length > 0) {
                        generateTable(data.result)
                    }
                },
                error: function(data){
                    alert(data.error);
                }
            });
        });
    </script>
</head>
<body>
<div id="table-container"></div>
</body>
</html>
